<template>
  <Card>
    <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
      <!-- <Form-item label="物资名称：" prop="line">
        <Select placeholder="选择物资" clearable v-model="searchForm.material" filterable style="width:200px;">
          <Option value="-1">全部</Option>
          <Option v-for="item in materials" :value="item.id" :key="item.id">{{ item.title }}</Option>
        </Select>
      </Form-item>-->
      <Form-item label="日期：" prop="date">
        <DatePicker
          v-model="searchForm.date"
          placeholder="请选择月份"
          placement="bottom-start"
          style="width: 200px"
          type="month"
          @change="dateChange()"
        ></DatePicker>
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
        <Button @click="handleReset">重置</Button>
      </Form-item>
    </Form>
    <Alert type="error">{{ date_text }}</Alert>
    <Button
      :disabled="exportBtnDisable"
      icon="md-cloud-download"
      style="margin-bottom:15px"
      type="primary"
      @click="exportMaterialStati"
    >导出
    </Button>
    <Table
      :columns="column"
      :data="data"
      :loading="loading"
      :span-method="handleSpan"
      border
      size="small"
      stripe
    ></Table>
    <!-- <Row type="flex" justify="end" class="page">
      <Page
        :total="total"
        :page-size="searchForm.pageSize"
        @on-change="changePage"
        show-total
        :current="searchForm.pageNumber"/>
    </Row>-->
  </Card>
</template>
<script>
import {materialStatiList} from '../../../api/material'

export default {
  data() {
    return {
      searchForm: {
        date: ''
      },
      loading: false,
      data: [],
      modal: false,
      importLoading: false,
      exportBtnDisable: false,
      total: 0,
      column: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {title: '名称', key: 'title', align: 'center', width: 200},
        {title: '单位', key: 'unit', align: 'center', width: 50},
        {
          title: '上月结余数量',
          key: 'balance_amount',
          align: 'center',
          width: 100
        },
        {title: '单价', key: 'price', align: 'center', width: 120},
        {title: '金额', key: 'total_price', align: 'center', width: 120},
        {
          title: '本月购买时间',
          key: 'put_created_at',
          align: 'center',
          width: 120
        },
        {title: '入库数量', key: 'put_amount', align: 'center', width: 100},
        {title: '入库单价', key: 'price', align: 'center', width: 100},
        {
          title: '入库金额',
          key: 'put_total_price',
          align: 'center',
          width: 100
        },
        {
          title: '出库时间',
          key: 'out_created_at',
          align: 'center',
          width: 100
        },
        {title: '出库车号', key: 'bus_num', align: 'center', width: 100},
        {title: '出库数量', key: 'out_amount', align: 'center', width: 100},
        {
          title: '结余',
          key: 'curr_balance_amount',
          align: 'center',
          width: 100
        }
      ],
      lines: [],
      materials: [],
      date_text: ''
    }
  },
  watch: {},
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getList()
    },
    dateChange(v) {
      const month = new Date(this.searchForm.date)
      const year = month.getFullYear()
      let start_month =
        month.getMonth() > 9 ? month.getMonth() : '0' + month.getMonth()
      const end_month =
        month.getMonth() + 1 > 9
          ? month.getMonth() + 1
          : '0' + (month.getMonth() + 1)
      let start_year = month.getFullYear()
      if (start_month == '00') {
        start_year = year - 1
        start_month = 12
      }
      const start_time = start_year + '-' + start_month + '-26'
      const end_time = year + '-' + end_month + '-25'
      this.date_text = '搜索时间：' + start_time + '到' + end_time
    },
    //导出
    exportMaterialStati() {
      window.location.href =
        '/api/exportMaterialStati?date=' + this.searchForm.date
    },
    getList() {
      this.loading = true
      materialStatiList(this.searchForm).then(res => {
        this.loading = false
        if (res.data) {
          this.data = res.data.result
          this.searchForm.date = res.data.date

          const month = new Date(this.searchForm.date)
          const year = month.getFullYear()
          let start_month =
            month.getMonth() > 9 ? month.getMonth() : '0' + month.getMonth()
          const end_month =
            month.getMonth() + 1 > 9
              ? month.getMonth() + 1
              : '0' + (month.getMonth() + 1)
          let start_year = month.getFullYear()
          if (start_month == '00') {
            start_year = year - 1
            start_month = 12
          }
          const start_time = start_year + '-' + start_month + '-26'
          const end_time = year + '-' + end_month + '-25'
          this.date_text = '搜索时间为：' + start_time + '到' + end_time
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getList()
    },
    handleSpan({row, column, rowIndex, columnIndex}) {
      if (row.out_count_num == 1) {
        if (rowIndex === row._index && columnIndex === 1) {
          return {
            rowspan: row.out_count,
            colspan: 1
          }
        }
      }
      if (row.out_count > 1) {
        if (row.out_count == row.out_count_num) {
          //row 行  column 列
          if (rowIndex === row._index && columnIndex === 1) {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
      //row 行  column 列
      // if (rowIndex === 4 && columnIndex === 1) {
      //     return {
      //         rowspan: 3,
      //         colspan: 1
      //     };
      // }
      // else if (rowIndex === 6 && columnIndex === 1) {
      //     return {
      //         rowspan: 0,
      //         colspan: 0
      //     };
      // }
    },
    init() {
      this.getList()
    }
  }
}
</script>
